// 绑定一个点击的事件，能够得到页面的滚动条的长度，能够让div跟着变色
let dvdv = document.getElementById('littleDiv');
// 鼠标在整个html上进行移动的时候
let allHtml = document.querySelector('html');

let body = document.querySelector('body');


let pageYOfWin;
window.onscroll = function () {
    pageYOfWin = window.pageYOffset;
    // console.log(pageYOfWin);
    if (pageYOfWin > 300) {
        dvdv.style.opacity = 1
    }
    if (pageYOfWin <= 300) {
        dvdv.style.opacity = 0
    }
    // console.log(document.documentElement);
}

dvdv.onclick = function () {
    // 让页面顺滑的返回顶部
    console.log('触发了返回顶部的事件');
    // document.body.scrollTop = 0;
    // document.documentElement.scrollTop = 0;
    // 点击的时候调用定时器功能
    stepTimerChange();
}

let flag = true;

// 封装一个定时的函数，进行步长的操作
function stepTimerChange() {

    let step = -10;

    (function () {
        let isMove = false, timer = null;
        timerClear = setInterval(function () {
            document.documentElement.scrollTop += step;
            if (pageYOfWin < 10) {
                document.documentElement.scrollTop = 0;
                // 距离顶端小于10的时候清除定时器
                clearInterval(timerClear);
            }
        }, 50)
        window.onmousemove = function () {
            isMove = true;
            clearTimeout(timer);
            clearInterval(timerClear); // 清除移动的定时器
            timer = setTimeout(function () {
                isMove = false;
                timerClear = setInterval(function () {
                    document.documentElement.scrollTop += step;
                    // console.log("当前距离顶端的距离是 " + pageYOfWin);
                    if (pageYOfWin < 10) {
                        document.documentElement.scrollTop = 0;
                        // 距离顶端小于10的时候清除定时器
                        clearInterval(timerClear);
                    }
                }, 50)
            }, 50);
        }
    }());
}